<template>
  <root-portal>
    <uv-popup
      ref="popupTipsRef"
      bgColor="transparent"
      :closeOnClickOverlay="false"
      overlayOpacity="0.8"
    >
      <view class="popup-container" @tap="nextStep">
        <view class="popup-content" :style="[reactInfo]">
          <slot name="content"></slot>
        </view>
      </view>
    </uv-popup>
  </root-portal>
</template>

<script>
export default {
  name: "k-popup-tips",
  data() {
    return {
      reactInfo: {},
    };
  },
  props: {
    align: {
      type: String,
      default: 'left',
    },
    select: {
      type: String,
      default: '',
    },
    customStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    async getTipInfo(that) {
      const query = uni.createSelectorQuery().in(that);
      query
        .select(this.select)
        .boundingClientRect((res) => {
          this.reactInfo = {
            top: `${res?.top}px`,
            [this.align]: `${res?.[this.align]}px`,
            ...this.customStyle,
          };
          this.open();
        })
        .exec();
    },
    open() {
      this.$refs.popupTipsRef.open();
    },
    close() {
      this.$refs.popupTipsRef.close();
    },
    nextStep() {
      this.$emit('nextStep');
    },
  },
};
</script>

<style scoped lang="scss">
.popup-container {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.popup-content {
  position: absolute;
}
</style>
